<template>
  <div class="bg">
    <div class="login">
      <h2>小电驴</h2>
      <el-form
        :rules="rules"
        size="small"
        :model="formData"
        ref="ruleForm"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item prop="account">
          <el-input
            v-model="formData.account"
            prefix-icon="iconfont icon-yonghu"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formData.password"
            prefix-icon="iconfont icon-suoding"
            :type="isText ? 'text' : 'password'"
          >
            <i
              slot="suffix"
              @click="changeInputType"
              class="iconfont active"
              :class="isText ? 'icon-zhengyan' : 'icon-biyan'"
            ></i>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button size="small" type="warning" @click="loginBtn">登录</el-button>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      formData: {
        account: "",
        password: "",
      },
      isText: false,
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions("user", ["A_login"]),
    changeInputType() {
      this.isText = !this.isText;
    },
    loginBtn() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          await this.A_login(this.formData);
          //跳转
          this.$router.push("/home");
        } else {
          console.log("验证失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-color: #d99bac;
  position: relative;
}
.login {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
}
h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 30px;
  color: #f0dcdd;
}
.active {
  cursor: pointer;
  line-height: 30px;
}
.el-button {
  width: 100%;
  background-color: #eabeca;
  height: 40px;
  font-size: 18px;
  border: 0;
}
.el-form .el-input__inner {
  height: 40px;
}
.icon-zhengyan .icon-biyan {
  font-size: 20px;
}
</style>